<template>
	<view class="content">
		<!-- 搜索框 -->

		<!-- 顶部地址栏 -->
		<view class="address">
			<image src="../../static/common/location.png"></image>
			<view class="city">
				{{city}}
			</view>
		</view>

		<!-- 顶部导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'top'+ tabIndex">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index} " @tap="toggleTab(index)" :id="'top'+ index">
						{{item.farmCounty}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<view class="content">
			<!-- 滑块视图 -->
			<view class="content_view">

				<view class="content_view_head">
					<swiper :current="tabIndex" style="height:1870rpx;" @change="tabChange">
						<!-- current:当前所在滑块的index -->

						<swiper-item v-for="(content,index) in contentList" :key="index">

							<view class="content_view_head_left">
								<text>养殖家共计:{{content.farmNumber}}家</text>
							</view>

							<view @click="goDetail" class="content_view_head_right">
								<text>查看详情</text>
							</view>


							<!-- 数据模块 -->
							<view class="content_view_central_list">
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="background-color: #83c986;height: 100rpx">
										<p>存栏</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">
											合计存栏畜牧:{{content.farmSeed}}头
										</view>

									</view>
								</view>
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="background-color: #d9af90;">
										<p>栏舍面积</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">
											栏舍总面积:{{content.farmTotalArea}}㎡
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											传统栏舍面积:{{content.farmHurdlesArea}}㎡
										</view>
										<view class="xian"></view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											高架床面积:{{content.farmElevatedBedArea}}㎡
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											低架床面积:{{content.farmLowBedArea}}㎡
										</view>

									</view>
								</view>
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="height: 150rpx;background-color: #7aafef;">
										<p>沼气池</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">

											<view class="content_view_central_list_li_right_li_right" style="flex: 1;">
												沼气池体积:{{content.farmBiogasDigesterArea}}m³
											</view>

										</view>

									</view>
								</view>
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="height: 200rpx;background-color: #55aa7f;">
										<p>免疫合格证</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">

											<view class="content_view_central_list_li_right_li_right" style="flex: 1;">
												持有免疫合格证共有:{{content.farmCertificateNumber}}家
											</view>

										</view>

									</view>
								</view>
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="background-color: #7c87d9;">
										<p>生态化改造</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">

											<view class="content_view_central_list_li_right_li_right" style="flex: 1;">
												储液池面积:{{content.farmStorageTankArea}}㎡
											</view>

										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">

											<view class="content_view_central_list_li_right_li_right" style="flex: 1;">
												储粪池面积:{{content.farmSepticTankArea}}㎡
											</view>

										</view>

										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											使用干清粪:{{content.dryCrementNumber}}家
										</view>
										<view class="xian"></view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											使用益生菌:{{content.farmUseProbioticsNumber}}家
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											以改水:{{content.farmISWaterNumber}} 家
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											完成改造:{{content.farmTransformationNumber}}家
										</view>
									</view>
								</view>

								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left" style="background-color: #d7b358;">
										<p>粪污处理</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li2">
											<view class="content_view_central_list_li_right_li2_p1" style="margin: 20rpx 68% 20rpx 4%;">自有土地消纳</view>
											<view class="content_view_central_list_li_right_li2_p2">土地消纳总量: {{content.farmAbsorptiveArea}}吨</view>
											<view class="content_view_central_list_li_right_li2_p2">自有土地消纳面积: {{content.farmTotalConsumption}}㎡</view>

										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li2">
											<view class="content_view_central_list_li_right_li2_p1" style="margin: 20rpx 63% 20rpx 4%;">委托第三方处理</view>
											<view class="content_view_central_list_li_right_li2_p2">收运总量: {{content.farmCollectionTotal}}吨</view>

										</view>

									</view>
								</view>
							</view>

						</swiper-item>
					</swiper>
				</view>
			</view>





		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				/* 选中标签栏的序列,默认显示第一个 */
				contentList: [],
				city: '玉林',
				address: [],
				tabBars: [],
				farmCounty: ''
			}
		},
		onLoad() {

		},
		onReady() {
			this.getdata();
		},
		onShow() {

		},
		methods: {

			//切换选项卡
			toggleTab(index) {
				this.tabIndex = index;
			},

			//滑动切换swiper
			tabChange(e) {
				//console.log(e);
				this.tabIndex = e.detail.current;
				this.farmCounty = this.tabBars[this.tabIndex].farmCounty
				console.log(this.farmCounty)
			},
			getdata() {
				// console.log(this.User.userRight)
				uni.request({
					url: this.confige.webUrl + '/statistics/farmMunicipal',
					method: 'GET',
					data: {
						// farmCounty:"玉州区"
					},
					header: {
						"X-Token": this.User.token
					},
					success: (res) => {
						console.log(res)

						let list = res.data.result[0].list;
						this.contentList = list;
						this.tabBars = list;
						this.address = list;
						this.farmCounty = this.tabBars[0].farmCounty
					}

				});
			},

			goDetail() {
				uni.navigateTo({
					url: '../statistics/county?farmCounty=' + this.farmCounty
				})
			}
		}
	}
</script>

<style lang="less">
	p {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 750rpx;
		height: auto;
		background-color: #f1f2f3;

	}

	/*搜索模块*/
	.search {
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		margin: 20rpx auto;
		/* background-color: #FFFFFF; */
	}

	.search_li {
		flex: 5;
		border: 2rpx solid #c3c3c3;
		height: 70rpx;
		border-radius: 10rpx;
		margin: 14rpx 40rpx;
		display: flex;
		/* background-color: #000000; */
	}

	.search_li_size {
		flex: 3;
		font-size: 40rpx;
		margin-left: 3%;
		color: #c2c2c2;

	}



	.content_view {
		width: 750rpx;
		height: auto;
	}

	.content_view_head {
		width: 100%;
		height: auto;

	}

	.content_view_head_left {
		width: auto;
		height: 50rpx;
		font-size: 32rpx;
		float: left;
		margin: 0 0 0 10rpx;
		text-align: center;
		border-left: 10rpx solid #4ac997;
		display: flex;
		align-items: center;
		margin-left: 25rpx;
	}
	
	.content_view_head_left >text {
		margin-left: 20rpx;
	}

	.content_view_head_right {
		width: auto;
		height: 50rpx;
		font-size: 30rpx;
		float: right;
		margin-right: 25rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #02a7f0;
		display: flex;
		align-items: center;
		
	}

	.address {
		display: flex;
		width: 100%;
		height: auto;
		padding: 10rpx 0 10rpx 2%;
	}

	.address>image {
		height: 50rpx;
		width: 50rpx;
	}

	.address>view {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.city {
		font-size: 40rpx;
	}

	.hen {
		font-size: 40rpx;
	}

	.county,
	.town,
	.village,
	.personal {
		font-size: 40rpx;
	}

	.horizonal-tab {}

	.horizonal-tab .active {
		color: #000000;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		/* text-align: center; */
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

	}

	.scroll-tab-item {
		color: #b8b8b8;
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 0;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid #4ac997;
		border-top: 5rpx solid #4ac997;
		border-radius: 20rpx;
		width: 100%;
		margin-top: 10rpx;
	}


	.content_view_central_list {
		width: 700rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		margin-left: 25rpx;
	}

	.content_view_central_list_li {
		width: 100%;
		display: flex;
		height: auto;
		background-color: #FFFFFF;
		margin-top: 25rpx;
		border-radius: 18rpx;
		box-shadow: 0rpx 0rpx 5rpx 5rpx #E3E3E3;

		display: flex;
		/* align-items: center; */
	}

	.content_view_central_list_li_left {
		flex: 1;
		width: 80rpx;
		border-radius: 18rpx 0 0 18rpx;


		display: flex;
		justify-content: center;
		align-items: center;
		writing-mode: tb-rl;
	}

	.content_view_central_list_li_left>p {
		/* margin:auto; */
		/* writing-mode:tb-rl; */
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;

	}


	.content_view_central_list_li_right {
		flex: 8;
		margin: auto 0;

		/* background-color: #007AFF; */
	}

	.content_view_central_list_li_right_li {
		margin: 20rpx 0 20rpx 4%;
		font-size: 30rpx;
		display: flex;

	}

	.xian {
		width: 90%;
		height: 2rpx;
		background-color: #dedede;
		margin-left: 4%;
	}

	/* 粪污处理样式 */
	.content_view_central_list_li_right_li2 {
		width: 100%;
		height: auto;
	}

	.content_view_central_list_li_right_li2_p1 {
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 2px solid #09BB07;
	}

	.content_view_central_list_li_right_li2_p2 {
		margin: 20rpx 0 20rpx 4%;
		font-size: 30rpx;
	}

	.content_view_central_list_li_right_li2_p3 {
		width: 96%;
		height: auto;
		display: flex;
		font-size: 30rpx;
		margin: 20rpx 0 20rpx 4%;
	}

	.content_view_central_list_li_right_li2_p3_left {
		flex: 1;
	}

	.content_view_central_list_li_right_li2_p3_right {
		flex: 1;
		text-align: center;
		margin-right: 4%;
	}
</style>
